﻿/// <reference Path="./jquery-1.3.2.min.js" />
$(function () {
    var defaults = {
        image: {
            space: 64, // 图片之间的距离, 包知图片宽, 图片边框, 图片的其它
            shownum: 5 // 为 0 表示自适应当前屏幕大小
        },
        css: {
            container: "div_contaioner",
            leftbtnenabled: "div_left_btn_enabled",
            leftbtndisabled: "div_left_btn_disabled",
            rightbtnenabled: "div_right_btn_enabled",
            rightbtndisabled: "div_right_btn_disabled",
            shadow: "div_shadow",
            picture: "div_picture"
        },
        ismovepage: false, // 为 true 表示一次移动一屏
        onimageclick: null, // 单击图片触发事件
        container: $(document.body) // 承载容器
    };
    $.scrollImage = function (options) {
        this.image = $.extend(defaults.image, options.image);
        this.css = $.extend(defaults.css, options.css);
        var s = $.extend(defaults, options);
        this.ismovepage = s.ismovepage;
        this.onimageclick = s.onimageclick;
        this.container = s.container;
        this.container.show();
    };
    $.scrollImage.prototype = {
        _load: function (func) {
            // 判断图片加载
            var s = this, itemp = 0, imgs = this.container.find("img");
            imgs.each(function () {
                var tempimg = $(new Image());
                tempimg.attr("src", $(this).attr("src") + "?" + Math.random());
                tempimg.load(function () {
                    if (tempimg.attr("complete") || tempimg.attr("readyState") == "complete") {
                        if (++itemp == imgs.length && $.isFunction(func)) {
                            func.call(s);
                        }
                    }
                }).error(function () {
                    if (++itemp == imgs.length && $.isFunction(func)) {
                        func.call(s);
                    }
                });
            });
        },
        _init: function () {
            var s = this, img = this.image, l = this.container.find("img").length, w = l * img.space;
            var imghtml = this.container.html();
            s._movespace = s.ismovepage ? img.space * img.shownum : img.space;
            if (img.shownum == 0) {
                img.shownum = Math.floor($(window).width() / img.space);
                img.shownum = img.shownum > l ? l : img.shownum;
            }
            this.container.empty();

            this._container = $("<div></div>").addClass(s.css.container);
            this._leftbtn = $("<div></div>").addClass(s.css.leftbtnenabled);
            this._rightbtn = $("<div></div>").addClass(s.css.rightbtnenabled);
            this._shadow = $("<div></div>").addClass(s.css.shadow);
            this._picture = $("<div></div>").addClass(s.css.picture).width(w).html(imghtml);
            this._leftbtn.appendTo(this._container);
            this._picture.appendTo(this._shadow);
            this._shadow.appendTo(this._container);
            this._rightbtn.appendTo(this._container);
            this._container.appendTo(this.container);

            var h = this._picture.outerHeight();
            this._shadow.height(h).width(img.space * img.shownum);
            this._leftbtn.height(h).css("margin-right", "5px");
            this._rightbtn.height(h).css("margin-left", "5px");
            this._container.height(h).width(this._leftbtn.width() + this._rightbtn.width() + this._shadow.width() + 5 * 2);
        },
        _click: function () {
            var s = this;
            var mouseover = function () {
                $(this).addClass("current").siblings("img[class!='current']").removeClass("current");
            };
            var mouseout = function () {
                $(this).removeClass("current");
            };
            s._picture.find("img").bind("mouseover", mouseover).bind("mouseout", mouseout).click(function () {
                $(this).unbind("mouseover").unbind("mouseout");
                $(this).addClass("current").siblings().removeClass("current").bind("mouseover", mouseover).bind("mouseout", mouseout);
                if (s.onimageclick && $.isFunction(s.onimageclick)) {
                    s.onimageclick.call($(this));
                }
            }).eq(0).click();
        },
        _move: function () {
            var s = this;
            var leftclick = function () {
                f_ld();
                s._picture.animate({ "left": parseInt(s._picture.css("left")) + s._movespace }, 'fast', null, function () {
                    f_le();
                    if (s._picture.width() - Math.abs(parseInt(s._picture.css("left"))) > s._shadow.width()) {
                        f_re();
                    }
                    if (parseInt(s._picture.css("left")) >= 0) {
                        f_ld();
                    }
                });
            };
            var rightclick = function () {
                f_rd();
                s._picture.animate({ "left": parseInt(s._picture.css("left")) - s._movespace }, 'fast', null, function () {
                    f_re();
                    if (s._picture.width() - Math.abs(parseInt(s._picture.css("left"))) <= s._shadow.width()) {
                        f_rd();
                    }
                    if (parseInt(s._picture.css("left")) < 0) {
                        f_le();
                    }
                });
            };
            var f_ld = function () { s._leftbtn.addClass(s.css.leftbtndisabled).unbind("click"); }
            var f_rd = function () { s._rightbtn.addClass(s.css.rightbtndisabled).unbind("click"); }
            var f_le = function () { s._leftbtn.removeClass(s.css.leftbtndisabled).bind("click", leftclick); }
            var f_re = function () { s._rightbtn.removeClass(s.css.rightbtndisabled).bind("click", rightclick); }
            s._leftbtn.click(leftclick);
            s._rightbtn.click(rightclick);
            f_ld();
            if (s._picture.width() <= s._shadow.width()) {
                f_rd();
            }
        },
        apply: function (flag) {
            if (flag) {
                this._load(function () {
                    this._init();
                    this._click();
                    this._move();
                });
            }
        }
    };

    $.fn.ScrollImage = function (options) {
        var si = $(document.body).data("si_" + $(this).attr("id"));
        if (si == undefined) {
            si = new $.scrollImage($.extend({ container: $(this) }, options));
            $(document.body).data("si_" + $(this).attr("id"), si);
            si.apply(true);
        } else {
            si.apply(false);
        }
    };
});